import { Component, OnInit, Input, Output, OnDestroy, EventEmitter, OnChanges, ViewChild, ElementRef, SimpleChange, Renderer2 } from '@angular/core';
import { Farm } from '../../../../entity/farm.model';
import { DataSourceService } from '../../../../service/data-source/data-source.service';
import { TagData } from '../../../../entity/tag-data.model';
import { DatePipe } from '@angular/common';
import { Http } from '@angular/http';
import { ApplicationService } from '../../../../service/application.service';
import { LimitedFarmData } from '../wind-energy.component';
@Component({
  selector: 'app-wind-energy-map',
  templateUrl: './wind-energy-map.component.html',
  styleUrls: ['./wind-energy-map.component.css']
})
export class WindEnergyMapComponent implements OnInit {
  @Input() farms: LimitedFarmData[] = [];
  @Output() farmChange = new EventEmitter<number>();
  /* farmData: FarmData[]; */
  active: number = null;
  @ViewChild('map')
  map: ElementRef;
  zoom = 1;
  offsetX = 0;
  offsetY = 0;
  constructor(
    private application: ApplicationService,
    private dataSource: DataSourceService,
    private datePipe: DatePipe,
    private http: Http,
    private renderer: Renderer2
  ) { }

  // tslint:disable-next-line:use-life-cycle-interface
  public ngOnDestroy(): void {
    this.dataSource.dispose();
  }
  ngOnInit() {
    let mapUrl = "url(" + "./assets/images/" + this.application.appConfigData.appCompany + ".png" + ") no-repeat center";
    this.renderer.setStyle(this.map.nativeElement, "background", mapUrl);
    this.renderer.setStyle(this.map.nativeElement, "background-size", 'auto 100%');
    if (this.application.currentApplicationParams && this.application.currentApplicationParams['farmZoom']) {
      const num = Number(this.application.currentApplicationParams['farmZoom'].paramValue);
      this.zoom = (num > 1 || num < 0) ? 1 : num;
    }
    if (this.application.currentMenuParams && this.application.currentMenuParams['offsetX']) {
      const num = Number(this.application.currentMenuParams['offsetX'].paramValue);
      this.offsetX = num;

    }
    if (this.application.currentMenuParams && this.application.currentMenuParams['offsetY']) {
      const num = Number(this.application.currentMenuParams['offsetY'].paramValue);
      this.offsetY = num;
    }
  }

  onHeaderClick(farmData: LimitedFarmData, index: number) {
    if (this.active === index) {
      this.active = null;
    } else {
      this.active = index;
    }
    this.farmChange.emit(this.active);
  }


}
/* interface FarmData {
  farmName: string,
  windDirection?: TagData,
  temperature?: TagData,
  windSpeed?: TagData,
  posx?: number,
  posy?: number
} */



// WEBPACK FOOTER //
// ./src/app/module/monitor/wind-energy/wind-energy-map/wind-energy-map.component.ts